.layout {
  .map-container {
    height: 100vh;
    background-color: #DDD !important;
  }

  .spin {
    position: absolute;
    width: 100%;
    top: 45%;
    z-index: 200;
  }


  .home-icon {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 20;
    border: 2px #4456BB solid;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 15px;
    text-align: center;
    line-height: 25px;
    font-weight: bold;
    color: #4456BB;
  }

  .shop-icon {
    position: absolute;
    top: 25px;
    right: 20px;
    z-index: 20;
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    padding: 3px;

    img {
      width: 32px;
      height: 32px;
    }

    font-size: 10px;
    text-align: center;
  }

  .audio-control {
    position: absolute;
    bottom: 3px;
    background-color: rgba(187, 200, 230, 0.8);
    left: 15px;
    right: 15px;
    height: 26px;
    border-radius: 10px;
    font-size: 20px;
    line-height: 26px;

    > h5, h4 {
      text-align: center;
      display: inline-block;
      width: 50%;
    }

    .item-img {
      width: 10px !important;
      height: 10px !important;
    }

    > span {
      &:active {
        opacity: 0.3;
      }

      margin: 0 10px;
      text-align: center;
    }
  }


  .park-map-marker-animation {

    animation: rotate .6s linear 2;

    @keyframes rotate {
      0%, 100% {
        transform: translate(-18px, -32px);
      }
      25% {
        transform: translate(-18px, -48px);
      }
      50% {
        transform: translate(-18px, -70px) scale(1.1, 0.9);
      }
      75% {
        transform: translate(-18px, -48px);
      }

    }
  }

  .park-point-info-window {
    background-color: rgba(255, 255, 255, 0.5);
    padding-bottom: 6px;
    width: 150px;
    height: 200px;

    .infoWindow {
      text-align: center;

      .foot {
        width: 70px;
        font-size: 14px;
        border-radius: 3px;
        border: none;
        background-color: #39a9ed;
      }
    }

    > div:nth-child(2) {
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      margin: 1px 0;
    }

    img {
      width: 150px;
      height: 150px;
    }
  }
}


body {
  .drawer {
    box-shadow: 10px 10px 5px #888888;;

    .carousel {
      width: 100%;

      > img {
        width: 100%;
        height: 220px;
      }
    }

    h2, h3 {
      text-align: center;
    }

    .menu {
      img {
        width: 38px;
        height: 38px;
      }

      > div {
        margin: 5px 0;
      }
    }
  }

  .point-info-modal {
    padding: 0;
    margin: 12px 0 0;

    > video,audio {
      width: 100%;
    }

    z-index: 100;
    height: 420px;
    overflow: auto;
  }
}

:global {
  .amap {
    &-logo, &-copyright {
      display: none !important;
    }

    &-marker {
      &-label {
        border: none;
        //background-color: rgba(128, 125, 125, 0.6);
        //color: white;
        background-color: red;
        border-radius: 5px;
        color: white;
      }

    }

    &-simple-marker-icon {
      img {
        width: 24px;
        height: 36px;
      }
    }


    &-info-content {
      padding: 0;
    }

    &-info-close, &-ui-infowindow-close {
      display: none;
    }

    &-ui-smp-ifwn-info-title {
      text-align: center;
      padding-right: 2px !important;
    }


  }

}
